import React, { useState } from 'react';
import { Switch, Radio, Checkbox } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const PieLabel = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const [ isShowLabel, setLabel ] = useState( ( config.style && config.style.isShowLabel === false ) ? false : true );
	const [ labelPosition, setPosition ] = useState( config.style.labelPosition || 'outside' );
	const [ labelContentType, setContent ] = useState( ( config.style && config.style.labelContentType ) || [ 'percent' ] );
	const fontConfig = [
		'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic'
	];

	const plainOptions = [
		{ label: '名称', value: 'item' },
		{ label: '百分比', value: 'percent' },
		{ label: '数值', value: 'count' },
	];

	const onChange = ( checked: boolean ) => {
		setLabel( checked );
		form.setFieldsValue( { isShowLabel: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handlePositionChange = ( event ) => {
		setPosition( event.target.value );
		form.setFieldsValue( { labelPosition: event.target.value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleContentChange = ( value ) => {
		setContent( value );
		form.setFieldsValue( { labelContentType: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			<FormItem label="是否显示" name="isShowLabel" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowLabel } onChange={ onChange }/>
			</FormItem>

			{
				isShowLabel && (

					<div>
						<FormItem label="显示内容" name='labelContentType' initialValue={ labelContentType } labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
							<Checkbox.Group options={plainOptions} defaultValue={ labelContentType } value={ labelContentType } onChange={ handleContentChange }></Checkbox.Group>
						</FormItem>

						<FormItem label="显示位置" name="labelPosition" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
							<Radio.Group value={ labelPosition } defaultValue={ labelPosition } onChange={ handlePositionChange }>
								<Radio.Button value="inner">内部</Radio.Button>
								<Radio.Button value="outside">外部</Radio.Button>
								<Radio.Button value="circle">圆形</Radio.Button>
								<Radio.Button value="spider">蜘蛛形</Radio.Button>
							</Radio.Group>
						</FormItem>

						<FormItem label="标签字体" name="labelFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
							<Editor
								config={config}
								form={form}
								onValuesChange={onValuesChange}
								fontFamilyName="labelFontFamily"
								fontSizeName="labelFontSize"
								fontColorName="labelFontColor"
								boldName="labelFontBold"
								italicName="labelFontItalic"
								fontConfig={fontConfig}
							/>
						</FormItem>
					</div>
				)
			}
		</div>
	);
};

export default React.memo( PieLabel );
